<template>
	<view class="app My-FeedBack ">
		<AppNavbar :bgColor="'transparent'" leftIconColor="black" titlecolor="black" :fontWeight="600"></AppNavbar>
		<view class="My-FeedBack-title px-4 mt-2">
			<text class="f-size-20 font-weight-600"> Send a message</text>
			<view class="My-FeedBack-title-tip f-size-16  mt-1">
				Please leave your question or make valueable suggestions in use
			</view>
		</view>
		<view class="My-FeedBack-form mx-3 mt-3">
			<Myform :data="state.formData" :rules="state.rules" ref="myFormRef"></Myform>
		</view>
		<view class="f-size-14 font-weight-600 mt-2 pl-4">
			message
		</view>
		<view class="My-FeedBack-message mx-3 mt-1 ">

			<up-textarea placeholder="say something" count style="height: 400rpx;" v-model="state.message"
				maxlength="500"></up-textarea>
		</view>
		<view class="My-FeedBack-title ml-4 mt-3 f-size-16 font-weight-600">
			Upload screenshot
		</view>
		<view class="My-FeedBack-photo ">
			<!-- <image src="/add" mode=""></image> -->
			<view class="My-FeedBack-photo-image ml-4 mt-3 flex-center" v-for="(item,index) in state.imageList"
				:key="item" @click="viewImage(index)">
				<image :src="item" mode="aspectFill"></image>
			</view>
			<view class="My-FeedBack-photo-image ml-4 mt-3 flex-center">
				<image src="../../static/icon/add.png" mode="" @click="uploadImage"></image>
			</view>

		</view>
		<button class="My-FeedBack-button mx-3 mt-5 color-fff" @click="submitFun">Submit</button>
	</view>
</template>

<script setup>
	import {
		feedbackApi
	} from '@/api/account.js'
	const myFormRef = ref(null)

	const state = reactive({
		formData: [{
				prop: 'name',
				label: 'Name',
				value: '陈',
				line: true
			},
			{
				prop: 'email',
				label: 'E-Mail',
				value: '1642769506@qq.com',
				line: true
			},
			{
				prop: 'nation',
				label: 'Nation',
				value: 'China',
				line: false
			}
		],
		rules: {
			name: {
				type: 'string',
				required: true,
				message: 'Please fill in your  name',
				trigger: ['blur', 'change']
			},
			email: 'email',
			nation: {
				type: 'string',
				required: true,
				message: 'Please fill in your nation',
				trigger: ['blur', 'change']
			}

		},
		message: '',
		imageList: []
	})
	const uploadImage = () => {

		uni.chooseImage({
			count: 9 - state.imageList.length, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: async (res) => {
				let arr = res.tempFilePaths
				let promiseList = []
				for (const item of arr) {
					let p = uni.uploadMedia.startUpload({
						files: [item],
						method: 'images/',
						dir: 'text/',
					})
					promiseList.push(p)
				}
				const data = await Promise.all(promiseList)
				data.forEach(item => {
					state.imageList.push(item[0])
				})
				// console.log(data);



			}
		})

	}
	const submitFun = async () => {
		const data = await myFormRef.value.verify()
		if (!data) {
			return
		}
		if (state.message === '') {
			return uni.tools.showTips('Please fill in the feedback form')
		}
		let postData = {
			...data,
			message: state.message,
			screenshot: state.imageList.join(',')
		}
		const res = await feedbackApi(postData)
		uni.tools.showTips(res.msg)
		// console.log(res);

	}
	const viewImage = (index) => {
		uni.previewImage({
			urls: state.imageList,
			current: index
		})
	}

	function goto(ulr) {
		uni.$to(ulr)
	}
</script>

<style lang="scss" scoped>
	.My-FeedBack {
		background-color: #ededed;
		min-height: 100vh;

		.My-FeedBack-title {
			// border: 1px solid red;

			.My-FeedBack-title-tip {
				color: black;

			}
		}

		.My-FeedBack-form {
			border: 1px solid black
		}

		.My-FeedBack-message {
			border: 1px solid black;


		}

		.My-FeedBack-photo {
			display: flex;
			flex-wrap: wrap;

			.My-FeedBack-photo-image {

				width: 140rpx;
				height: 140rpx;
				border: 1px solid #d9d9d9;


				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.My-FeedBack-button {
			background: $uni-bg-linear;
		}

		::v-deep .u-form-item__body__right__message {
			margin-left: 15px !important;
		}
	}
</style>